<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Bootstrap 实例 - 模态框（Modal）插件</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


  <!-- 按钮触发模态框 -->
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    编辑姓名
  </button>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">
            请输入姓名
          </h4>
        </div>
        <div class="modal-body">
          <form action="">
            <span>姓名：</span>
            <input type="text" class="username">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消
          </button>
          <button type="button" class="btn btn-primary" id="identifier">
            保存
          </button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

  <script>


    //点击 编辑姓名 跳出弹框
    // $(function () {
    //   $('btn-lg').modal('show')
    //   document.querySelector('.username').value = '默认姓名'
    // })

    document.querySelector('.username').value = '默认姓名'

  </script>

</body>

</html>